<template>
  <div class="client-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input v-model="searchId" placeholder="输入客户端ID" class="search-input" clearable />
      <el-button type="primary" class="search-btn" @click="handleSearch">
        搜索
      </el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="filteredClients" stripe class="client-table" :header-cell-style="{ background: '#f5f7fa' }">
      <el-table-column prop="client_id" label="客户端ID" width="220" sortable header-align="left" align="left" />

      <el-table-column label="设备类型" width="160" header-align="center" align="center">
        <template v-slot="{ row }">
          <el-tag :type="getDeviceTagType(row.device_type)" effect="dark" class="device-tag">
            {{ deviceTypeLabels[row.device_type] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="最后上线时间" min-width="200" align="center" header-align="center">
        <template v-slot="{ row }">
          <div class="time-display">
            {{ formatDateTime(row.last_active) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="参与任务数" width="140" align="center" header-align="center">
        <template v-slot="{ row }">
          <el-badge :value="row.participated_tasks.length" class="task-counter" />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="130" align="right" header-align="center">
        <template v-slot="{ row }">
          <el-button size="mini" class="detail-btn" @click="showTaskList(row)">
            任务详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 任务详情对话框 -->
    <el-dialog :visible.sync="dialogVisible" :title="`客户端 ${selectedClientId} 的任务列表`" class="task-dialog">
      <div class="task-container">
        <div v-for="(task, index) in selectedTasks" :key="task" class="task-card">
          <span class="task-order">#{{ index + 1 }}</span>
          <div class="task-id">{{ task }}</div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="confirm-btn" @click="dialogVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchId: '',
      clients: [
        {
          client_id: 'server_001',
          device_type: 'server',
          last_active: '2023-10-03 10:00:00',
          participated_tasks: ['task_001', 'task_002']
        },     
              {
          client_id: 'client_001',
          device_type: 'edge',
          last_active: '2023-10-03 11:30:00',
          participated_tasks: ['task_001']
        },
        {
          client_id: 'client_002',
          device_type: 'edge',
          last_active: '2023-10-03 11:30:00',
          participated_tasks: ['task_001']
        }
      ],
      deviceTypeLabels: {
        server: '服务器节点',
        edge: '边缘设备',
        mobile: '移动终端'
      },
      dialogVisible: false,
      selectedClientId: '',
      selectedTasks: []
    }
  },

  computed: {
    filteredClients() {
      return this.clients.filter(client =>
        client.client_id.includes(this.searchId)
      )
    }
  },

  methods: {
    getDeviceTagType(type) {
      const typeMap = {
        server: 'success',
        edge: 'warning',
        mobile: 'info'
      }
      return typeMap[type] || ''
    },

    formatDateTime(datetime) {
      return datetime.replace(' ', ' · ').replace(/-/g, '/').slice(0, 25)
    },

    handleSearch() {
      console.log('Search triggered:', this.searchId)
    },

    showTaskList(client) {
      this.selectedClientId = client.client_id
      this.selectedTasks = client.participated_tasks
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.client-container {
  padding: 24px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  width: 260px;
  margin-right: 16px;
}

.client-table {
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .client-table th.el-table__cell {
  font-weight: 600;
  color: #2c3e50;
}

.device-tag {
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
  border-radius: 14px;
}

.time-display {
  font-family: 'Roboto Mono', monospace;
  color: #606266;
  letter-spacing: 0.3px;
}

::v-deep .task-counter .el-badge__content {
  background: #409eff;
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.detail-btn {
  padding: 6px 14px;
  border-radius: 4px;
}

.task-container {
  max-height: 60vh;
  padding-right: 8px;
  overflow-y: auto;
}

.task-card {
  display: flex;
  align-items: center;
  padding: 12px;
  margin: 8px 0;
  background: #f8fafc;
  border-radius: 6px;
  transition: all 0.2s;
}

.task-card:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.task-order {
  width: 40px;
  color: #909399;
  font-feature-settings: "tnum";
}

.task-id {
  flex: 1;
  font-family: 'Roboto Mono', monospace;
  color: #303133;
}

.task-dialog {
  border-radius: 12px !important;
}

.task-dialog .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
  padding: 20px 24px !important;
}

.task-dialog .el-dialog__title {
  font-size: 16px !important;
  color: #303133 !important;
  font-weight: 600 !important;
}

.task-dialog .el-dialog__body {
  padding: 20px 24px !important;
}

.confirm-btn {
  width: 120px !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
}
</style>
